fix: sticky form and navbar layout with consistent nav-height

1 files changed, 109 insertions, 107 deletions

diff --git a/src/routes/grocery/[id]/+page.svelte b/src/routes/grocery/[id]/+page.svelte
index 6588ec0..1aa28b4 100644
--- a/src/routes/grocery/[id]/+page.svelte
+++ b/src/routes/grocery/[id]/+page.svelte
@@ -19,129 +19,131 @@
 	let qualityScore = $state('');
 </script>
 
-<form
-	class="form-card"
-	method="POST"
-	action="?/update"
-	use:enhance={() => {
-		return async ({ update }) => {
-			await update({ reset: false });
-		};
-	}}
->
-	<label>
-		<span class="form-label">Nom</span>
-		<input class="form-input" type="text" name="name" bind:value={name} />
-	</label>
-	<label>
-		<span class="form-label">Catégorie</span>
-		<select class="form-select" name="category_id" bind:value={categoryId}>
-			<option value={-1}>—</option>
-			{#each data.categories as cat (cat.id)}
-				<option value={cat.id}>{cat.name}</option>
-			{/each}
-		</select>
-	</label>
-	<button class="btn-primary" type="submit"
-		>{saved ? '✓ Enregistré' : 'Enregistrer'}</button
+<main>
+	<form
+		class="form-card"
+		method="POST"
+		action="?/update"
+		use:enhance={() => {
+			return async ({ update }) => {
+				await update({ reset: false });
+			};
+		}}
 	>
-</form>
-
-<hr />
-
-<h2>Références</h2>
-
-<form class="form-card" method="POST" action="?/add" use:enhance>
-	<label>
-		<span class="form-label">Référence</span>
-		<input
-			class="form-input"
-			type="text"
-			name="reference"
-			bind:value={reference}
-			placeholder="ex. Carte Noire"
-			autocomplete="off"
-		/>
-	</label>
-	<div class="ref-row">
 		<label>
-			<span class="form-label">Prix</span>
-			<input
-				class="form-input"
-				type="number"
-				name="price"
-				bind:value={price}
-				placeholder="5.99"
-				step="0.01"
-			/>
+			<span class="form-label">Nom</span>
+			<input class="form-input" type="text" name="name" bind:value={name} />
 		</label>
 		<label>
-			<span class="form-label">Unité</span>
-			<select class="form-select" name="unit" bind:value={unit}>
-				<option value="€/kg">€/kg</option>
-				<option value="€/L">€/L</option>
-				<option value="€/u">€/u</option>
+			<span class="form-label">Catégorie</span>
+			<select class="form-select" name="category_id" bind:value={categoryId}>
+				<option value={-1}>—</option>
+				{#each data.categories as cat (cat.id)}
+					<option value={cat.id}>{cat.name}</option>
+				{/each}
 			</select>
 		</label>
+		<button class="btn-primary" type="submit"
+			>{saved ? '✓ Enregistré' : 'Enregistrer'}</button
+		>
+	</form>
+
+	<hr />
+
+	<h2>Références</h2>
+
+	<form class="form-card" method="POST" action="?/add" use:enhance>
 		<label>
-			<span class="form-label">Note</span>
+			<span class="form-label">Référence</span>
 			<input
 				class="form-input"
-				type="number"
-				name="quality_score"
-				bind:value={qualityScore}
-				placeholder="0–100"
-				min="0"
-				max="100"
+				type="text"
+				name="reference"
+				bind:value={reference}
+				placeholder="ex. Carte Noire"
+				autocomplete="off"
 			/>
 		</label>
-	</div>
-	<button class="btn-primary" type="submit">Ajouter une référence</button>
-</form>
+		<div class="ref-row">
+			<label>
+				<span class="form-label">Prix</span>
+				<input
+					class="form-input"
+					type="number"
+					name="price"
+					bind:value={price}
+					placeholder="5.99"
+					step="0.01"
+				/>
+			</label>
+			<label>
+				<span class="form-label">Unité</span>
+				<select class="form-select" name="unit" bind:value={unit}>
+					<option value="€/kg">€/kg</option>
+					<option value="€/L">€/L</option>
+					<option value="€/u">€/u</option>
+				</select>
+			</label>
+			<label>
+				<span class="form-label">Note</span>
+				<input
+					class="form-input"
+					type="number"
+					name="quality_score"
+					bind:value={qualityScore}
+					placeholder="0–100"
+					min="0"
+					max="100"
+				/>
+			</label>
+		</div>
+		<button class="btn-primary" type="submit">Ajouter une référence</button>
+	</form>
 
-{#if form?.error}
-	<p class="error">{form.error}</p>
-{/if}
+	{#if form?.error}
+		<p class="error">{form.error}</p>
+	{/if}
 
-<form method="POST" action="?/delete" use:enhance>
-	<ul class="item-list item-list--wide">
-		{#each data?.references ?? [] as ref (ref.id)}
-			<li class="item-row item-row--ref">
-				<div class="ref-info">
-					<strong>{ref.reference}</strong>
-					{#if ref.price}
-						<span class="ref-detail"
-							>{ref.price.toFixed(2)}{ref.unit ? ` ${ref.unit}` : ''}</span
-						>
-					{/if}
-					{#if ref.qualityScore != null}
-						<span class="ref-detail">Note : {ref.qualityScore}/100</span>
-					{/if}
-				</div>
-				<button
-					class="btn-ghost"
-					name="id"
-					value={ref.id}
-					type="submit"
-					aria-label="Supprimer"
-				>
-					&times;
-				</button>
-			</li>
-		{/each}
-	</ul>
-</form>
+	<form method="POST" action="?/delete" use:enhance>
+		<ul class="item-list item-list--wide">
+			{#each data?.references ?? [] as ref (ref.id)}
+				<li class="item-row item-row--ref">
+					<div class="ref-info">
+						<strong>{ref.reference}</strong>
+						{#if ref.price}
+							<span class="ref-detail"
+								>{ref.price.toFixed(2)}{ref.unit ? ` ${ref.unit}` : ''}</span
+							>
+						{/if}
+						{#if ref.qualityScore != null}
+							<span class="ref-detail">Note : {ref.qualityScore}/100</span>
+						{/if}
+					</div>
+					<button
+						class="btn-ghost"
+						name="id"
+						value={ref.id}
+						type="submit"
+						aria-label="Supprimer"
+					>
+						&times;
+					</button>
+				</li>
+			{/each}
+		</ul>
+	</form>
 
-{#if (data?.references?.length ?? 0) === 0}
-	<p class="empty">Aucune référence</p>
-{/if}
+	{#if (data?.references?.length ?? 0) === 0}
+		<p class="empty">Aucune référence</p>
+	{/if}
 
-<form method="POST" action="?/deleteItem" use:enhance>
-	<input type="hidden" name="from" value={data.from} />
-	<button type="submit" class="delete-item-btn">Supprimer l'article</button>
-</form>
+	<form method="POST" action="?/deleteItem" use:enhance>
+		<input type="hidden" name="from" value={data.from} />
+		<button type="submit" class="delete-item-btn">Supprimer l'article</button>
+	</form>
 
-<a href={data.from} class="back-link">&larr; Retour</a>
+	<a href={data.from} class="back-link">&larr; Retour</a>
+</main>
 
 <style>
 	.ref-row {